<template>
  <div>
    <button @click="abc">{{ msg }}</button>
    <label>{{ textData }}</label>
    <input type="text" v-model="textData" />
    <input type="text" v-bind:value="textData" />
    <hr />
    <button @click="fun1">测试vue指令</button>
    <p v-if="boo">显示</p>
    <p v-else>
    <div v-for="(s, index) in lis" :key="s.key1">
      <button>{{ index + 1 }}---{{ s.key2 }}</button>
    </div>
    </p>
    <hr />
    <template v-for="(value, key, index) in obj" :key="index">
      <p>{{ index + 1 }}:{{ value }}:{{ key }}</p>
    </template>
  </div>

  <Stu></Stu>
  <!-- 父值传给子模块 -->
  <Stu2 :nodeMsg="nodeMsg" abc="21级大数据" @myClick="myHead">
  </Stu2>
  <p>这个显示子模块里的数据：{{ nodeData }}</p>
</template>

<script>
import Stu from "./Stu.vue";
import Stu2 from "./Stu2.vue";
export default {
  //局部注册组件
  components: { Stu, Stu2 },
  data() {
    return {
      msg: 10,
      nodeMsg: '父模块的数据123',
      textData: "青职院",
      boo: true,
      lis: [
        { key1: 100, key2: "张三" },
        { key1: 200, key2: "小白" },
        { key1: 300, key2: "小张" },
      ],
      obj: {
        keya: "大数据1",
        keyb: "大数据2",
        keyc: "大数据3",
        keyd: "大数据4",
      },
      nodeData: ''
    };
  },
  methods: {
    abc() {
      this.msg++;
    },
    fun1() {
      this.boo = this.boo ? false : true;
    },
    myHead(msg) {
      this.nodeData = msg
    },
  },
};
</script>